<template>
    <div>
        <mi-upload :uploadUrl="uploadUrl"
                   :limit="1"
                   type="video"
                   @confirm="confirm">
            <div class="up_box" :style="{width:size_c,height:size_c}">
                <video :width="size" :height="size" controls v-if="modelValue">
                    <source :src="modelValue">
                    您的浏览器不支持 video 属性。
                </video>
                <el-icon v-else class="up_icon">
                    <span class="fa fa-upload"></span>
                </el-icon>
            </div>
        </mi-upload>
        <div>
            <mi-input v-model="value_c" placeholder="使用外部视频地址"/>
        </div>
    </div>


</template>

<script setup lang="ts">
import {computed, reactive} from "vue";

const props = withDefaults(defineProps<{
    modelValue?:string,
    size?: string | number,
    uploadUrl?: string,
    params?: any,   // 暂时没用到
}>(),{
    size: 180,
    uploadUrl:'',
})

const emits = defineEmits(['update:modelValue', 'onChange'])


const value_c = computed({
    get: () => {
        return props.modelValue
    },
    set: (val) => {
        emits("update:modelValue", val)
    }
})

const size_c = computed(() => {
    if (typeof props.size == "string"){
        return props.size
    }else{
        return String(props.size) + 'px'
    }
})

const confirm = (files: any[]) => {
    emits('update:modelValue', files[0].path)
}

</script>

<style scoped>
.up_box {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--el-text-color-secondary);
}

.up_box:hover {
    border-color: var(--el-color-primary);
    color: var(--el-color-primary);
}

.up_img {
    width: 100%;
    height: 100%;
}

.up_icon {
    width: 50%;
    height: 50%;
}
</style>
